<template>
    <div class="offer" id="print">
        <div class="offer-title">广告扇实时报价</div>
        <div class="offer-content">
            <div class="content">
                <div class="content-left">
                    <div class="content-left-top">
                        <p>{{production.Name}}</p>
                        <div class="service">
                            <span class="promise">
                                <font style="background:#E81623">邮</font>
                                全国包邮
                            </span>
                            <span class="promise">
                                <font style="background:#F3960A">质</font>
                                质量保证
                            </span>
                            <span class="promise">
                                <font style="background:#54BE59">送</font>
                                送货上门
                            </span>
                            <span class="promise">
                                <font style="background:#2292E9">近</font>
                                就近印刷
                            </span>
                        </div>
                    </div>
                    <div class="content-left-bottom">
                        <div class="list">
                            <span class="title">尺寸: </span>
                            <div class="item">
                                <div class="choose-list" v-for="(item,i) in production.Sizes" :key="i" @click="setProduct('Sizes', i)">
                                    <span :class="{'choose-item': true, active :item.IsDefault}">{{item.Name}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="list" v-if="production.IsShowPage">
                            <span class="title">P 数: </span>
                            <div class="item">
                                <div class="choose-list" v-for="(item,i) in production.Pages" :key="i" @click="setProduct('Pages', i)">
                                    <span v-if="item.DisplayMode == 0" :class="{'choose-item': true, active : item.IsDefault}">{{item.Quantity}}P</span>
                                    <img v-else :class="{'choose-img': true, active : item.IsDefault}" :src="$store.state.port.ossPath + item.ImageUrl" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="list" v-for="(item,i) in production.Attributes" :key="i">
                            <span class="title">{{item.Name}}: </span>
                            <div class="item">
                                <div class="choose-list" v-for="(tmp,index) in item.Items" :key="index" @click.stop="setProduct('Attributes', i, 'Items', index)">
                                    <span v-if="tmp.DisplayMode == 0" :class="{'choose-item': true, active : tmp.IsDefault}">{{tmp.Name}}</span>
                                    <img v-else :class="{'choose-img': true, active : tmp.IsDefault}" :src="$store.state.port.ossPath + tmp.ImageUrl" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="list" v-if="production.Crafts.length">
                            <span class="title">工序: </span>
                            <div class="item">
                                <div class="choose-list" v-for="(item,i) in production.Crafts" :key="i" @click="setProduct('Crafts', i)">
                                    <span :class="{'choose-item': true, active : item.IsDefault}">{{item.Name}}</span>
                                </div>
                            </div>
                        </div>
                        <div class="list">
                            <span class="title">数量: </span>
                            <div class="item">
                                <div class="choose-list" v-for="(item,i) in production.Quantities" :key="i" @click="setProduct('Quantities', i)">
                                    <span v-if="item.DisplayMode == 0" :class="{'choose-item': true, active : item.IsDefault}">{{item.Number + unit}}</span>
                                    <img v-else :class="{'choose-img': true, active : item.IsDefault}" :src="$store.state.port.ossPath + item.ImageUrl" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="list" v-if="production.Urgent">
                            <span class="title">加急: </span>
                            <div class="item">
                                <div class="choose-list">
                                    <span :class="{'choose-item' : true, active : urgent}" @click="handleChooseUrgent">我要加急</span>
                                </div>
                            </div>
                        </div>
                        <div class="list" v-if="couponList.length">
                            <span class="title coupon">优惠券: </span>
                            <div class="item" style="width: 507px;">
                                <div class="choose-list" v-for="(item,i) in couponList" :key="i">
                                    <div style="display:flex;color: #fff;margin-bottom: 10px;margin-right: 10px;cursor: pointer;">
										<div :class="couponIndex == i && (total >= item.LimitPrice) ? 'choose-item-active' : ''" :style="`width: 140px;height: 55px;text-align:center;background:${total <= item.LimitPrice ? '#999999' : '#199ED8'};position: relative; overflow: hidden;`" @click="handleCoupon(i)">
											<p>¥&nbsp;&nbsp;<span style="font-size: 28px;font-weight: 800;">{{item.Amount}}</span></p>
											<p>满{{item.LimitPrice}}元可用</p>
										</div>
										<div v-show="item.IsReceived != 1" @click.stop="handleReceive(item)" style="display: inline-block;width: 70px;height: 55px;line-height: 55px;text-align:center;background:#FF9900;">领取</div>
									</div>
                                </div>
                            </div>
                        </div>
                        <div class="list">
                            <span class="title file">文件: </span>
                            <div :class="{'way-btn':true, 'have-file': have}" @click="handleClick('have')">
                                <img src="/img/print/xqy_scwj_icon.png" alt="">
                                <span>已有文件</span>
                            </div>
                            <div :class="{'way-btn':true, 'no-file': no}" @click="handleClick('no')">
                                <img src="/img/print/xqy_zzsjj_icon.png" alt="">
                                <span>没有文件</span>
                            </div>
                        </div>
                    </div>
                </div>
                <el-dialog
                    title="选择模板"
                    :visible.sync="dialogVisible"
                    :close-on-click-modal="false"
                    :lock-scroll="false"
                    :show-close="false">
                    <div id="Loading" v-if="loading">
                        <div class="loader-inner ball-beat">
                            <div></div>
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                    <div class="close-btn" style="top: 0px;right: -50px;" @click="dialogVisible = false"></div>
                    <div class="choose-title">模板P数: {{pages + 'P'}}  模板尺寸:  {{sizename}}</div>
                    <div class="template-list" v-if="list.length">
                        <div :class="['template-item',tempIndex == i ? 'active' : '']" v-for="(item,i) in list" :key="i" @click="handleChooseTemp(i)">
                            <div class="template-block">
                                <div v-if="item.FacePicture" class="item-image" :style="{'background-image': `url(${$store.state.port.ossPath+ item.FacePicture})`}"></div>
                            </div>
                            <p class="template-title">{{item.Name}}</p>
                        </div>
                        <div class="template-item" style="height: 0px;visibility: hidden;"></div>
                        <div class="template-item" style="height: 0px;visibility: hidden;"></div>
                        <div class="template-item" style="height: 0px;visibility: hidden;"></div>
                        <div class="template-item" style="height: 0px;visibility: hidden;"></div>
                        <div class="template-item" style="height: 0px;visibility: hidden;"></div>
                    </div>
                    <div style="text-align: center;" v-if="!list.length && !loading">
                        <img src="/img/error/ku.png" alt="">
                        <p>您还没有设计过模板，请点击创建设计，设计您的专属模板</p>
                    </div>
                    <!-- <el-pagination
                        v-if="page.totalRecords > 10 && !loading"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="page.currentPage"
                        :page-size="page.pageSize"
                        layout="total, prev, pager, next, jumper"
                        :total="page.totalRecords">
                    </el-pagination> -->
                    <HomePagination :Page="page" @getTempList="getTemplate" v-if="page.totalRecords > 10 && !loading"/>
                    <span slot="footer" class="dialog-footer" v-if="!loading">
                        <el-button v-if="list.length" class="sure-btn" type="primary" @click="handleSure">确认选择</el-button>
                        <el-button class="create-btn" @click="handleToCreate">创建设计</el-button>
                    </span>
                </el-dialog>
                <div class="content-right">
                    <div class="choose-file" v-if="have">
                        <el-upload
                            :action="$store.state.port.netServer + '/UploadOrderFile'"
                            :limit='1'
                            :on-preview="handlePreview"
                            :on-remove="handleRemove"
                            :on-success="handleSuccess"
                            :on-progress='handleProgress'
                            :headers="myHeader"
                            :show-file-list="false">
                            <div class="upload">
                                <div class="choose-btn">
                                    <img src="/img/print/xqy_add_icon.png" alt="">
                                    选择文件
                                </div>
                                <span v-if="!printprice.FileName">未选择任何文件</span>
                                <span v-else class="success-file">{{printprice.FileName}}<i class="el-icon-close" @click.stop="handleDel"></i></span>
                            </div>
                            <div slot="tip" class="el-upload__tip">支持pdf、jpg、zip、rar、cdr、ai、psd格式</div>
                        </el-upload>
                    </div>
                    <div class="choose-file self" v-if="no">
                        <p class="self-title" v-if="tempName">
                            <img src="/img/print/xqy_wj.png" alt="">
                            <span>{{tempName}}</span>
                            <img src="/img/print/xqy_refresh_icon.png" alt="" title="重选" @click="dialogVisible = true">
                            <img src="/img/print/xqy_fork.png" alt="" title="删除" @click="handleDelete">
                        </p>
                    </div>
                    <div class="price-wrap">
                        <p class="amount">
                            <span class="price-title">总费用: </span>
                            <span class="price">{{totalPrice && totalPrice.toFixed(2)}}</span>
                            <span v-if="couponIndex != null" style="color:red;font-size: 14px;">(已优惠{{specialrate}}元)</span>
                        </p>
                        <p class="time">
                            <img src="/img/print/xqy_time_icon.png" alt="">
                            <span v-if="currentDate < xiadanDate">今天<span style="color:#0083E9;">{{production.PressTime}}</span>前下单，预计<span>{{time}}</span>可以发货</span>
                            <span v-else>现在下单，预计<span>{{time}}</span>可以发货</span>
                        </p>
                    </div>
                    <div class="order btn" @click="handleToCar(true)">立即下单</div>
                    <div class="add-cart btn" @click="handleToCar(false)">加入购物车</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import HomePagination from '@/components/home/HomePagination.vue'
export default {
    data () {
        return {
            production: {
                Attributes: [], // 规格
				Crafts: [], // 工序
                Pages: [], // P数
                Sizes: [], // 尺寸
            },
            printprice: { // 获取价格的参数
				SheetId: null, 
				SizeId: null,
				PageId: null,
				QuantityId: null,
				Attributes: null,
				Crafts: null,
				Urgent: null,
				Count: 0, 
				OrderType: 1,
				FileName: '',
				FilePath: '',
                DocumentNum: '',
                Thumb: '',
                Selected: 1
            },
            unit: '',  // 数量单位
            urgent: null,  // 加急
            totalPrice: '',  // 总费用
            time: '',        // 工期
            have: true,
            no: false,
            tempName: '',
            tempNum: '',
            dialogVisible: false,

            currentDate: '',  // 当前时间
            xiadanDate: '',   // 下单时间

            page: {
                currentPage: 1,  // 当前页
                totalRecords: 0,   // 总条数
                pageSize: 10,      // 每页个数
            },
            pages: '',
            sizename: '',
            list: [],    // 选择模板列表
            // tempList: [],
            loading: true,
            tempIndex: null,
            couponList: [],
            couponIndex: null,
            total: '',
        }
    },
    methods: {
        // 获取模板列表
        getTemplate() {
            this.list = []
            this.loading = true
            var formData = new FormData()
            formData.append('TeamNum', localStorage['teamNum']);
            formData.append('pageIndex', this.page.currentPage);
            formData.append('startTime', '');
            formData.append('endTime', '');
            formData.append('typeid', 38);
            formData.append('SizeId', this.printprice.SizeId);
            formData.append('Pages', this.pages);
            formData.append('pageSize', this.page.pageSize);
            this.$axios.post('/ChoseDocument', formData).then(res => {
                if(res == undefined) {
                    this.loading = false
                    return 
                }
                // console.log(res.data)
                if(res.data.Data.length > 0){
                    this.list = res.data.Data
                    // this.tempList = res.data.data.slice(0, 10)
                    this.loading = false
                    this.page.totalRecords = (res.data)['X-Pagination'].TotalCount
                }else{
                    this.loading = false
                    return
                }
            })
        },
        // 选择模板
        handleChooseTemp(i) {
            this.tempIndex = i
            this.tempNum = this.list[i].DocumentNumber
            this.tempName = this.list[i].Name
            this.printprice.FileName = this.list[i].Name
            this.printprice.Thumb = this.list[i].FacePicture
        },
        // 创建设计
        handleToCreate() {
            this.dialogVisible = false
            let num = this.production.ProductType.FromClass
            let subtitle = this.production.ProductType.TypeName
            let id = this.production.TypeId
            this.$router.push({path: '/templateList/templateCenter', query: {id: id, n: num, title: '', subtitle: subtitle}})
        },
        handleSure() {  // 确定选择
            this.dialogVisible = false
            this.printprice.DocumentNum = this.tempNum
            this.getPrice(this.printprice)
        },
        // 删除选择的模板 
        handleDelete() {
            this.tempName = ''
            this.printprice.DocumentNum = ''
        },
        // handleSizeChange(val) {
        //     // console.log(`每页 ${val} 条`);
        // },
        // handleCurrentChange(val) {
        //     // console.log(`当前页: ${val}`);
        //     this.tempList = []
        //     if(val > 1) {
        //         this.tempList = this.list.slice(this.page.pageSize * (val - 1), this.page.pageSize * val - 1)
        //     }else{
        //         this.tempList = this.list.slice(0, 10)
        //     }
        // },

        handlePreview(file) {},
        handleRemove(file, fileList) {},
        handleProgress(file) {},
        handleSuccess(res,file) {
            // console.log(res, file)
            if(res.status == 'ok'){
                this.$message({type: 'success', message: '上传成功'})
                this.printprice.FileName = file.name
                this.printprice.FilePath = res.key
                this.getPrice(this.printprice)
            }
        },
        handleDel() {  // 删除文件
            this.printprice.FilePath = ''
            this.printprice.FileName = ''
        },
        // 选择优惠券
        handleCoupon(i) {
            if(this.total <= this.couponList[i].LimitPrice){
                return
            }
            if(this.couponIndex == null) {
                this.couponIndex = i
                this.totalPrice = this.total - this.couponList[i].Amount
            }else if(this.couponIndex != i) {
                this.couponIndex = i
                this.totalPrice = this.total - this.couponList[i].Amount
            }else{
                this.couponIndex = null
                this.totalPrice = this.total
            }
            this.specialrate = this.couponList[i].Amount
        },
        // 领取优惠券
        handleReceive(item) {
            if(!this.$store.state.login.isLogin){
                this.$store.commit('login/toggleShow', true)
                return
            }else{
                if(item.IsReceived == 1) return
                var formData = new FormData()
                formData.append('CouponID', item.ID);
                let config = {
                    headers:{'Content-Type': 'multipart/form-data'}
                }
                this.$axios.post('/UserCoupon', formData, config).then(res => {
                    // console.log(res.data)
                    if(res.data.status == 'success'){
                        item.IsReceived = 1
                        this.$message.success(res.data.msg)
                    }else{
                        this.$message.warning(res.data.msg)
                    }
                })
            }
        },
        // 获取报价规格
        getPrintSize() {
            new Promise((resolve, reject) => {
                this.$axios.get('/ProductSheet?TypeID=' + 38).then(res => {
                    if(res.data == '') return console.log('没有返回')
                    // console.log(res.data)
                    this.production = res.data[0]
                    this.unit = res.data[0].ProductType.Unit
                    this.couponList = res.data[0].Coupons.reverse()
                    if(this.production.Urgent){
                        this.urgent = true
                    }else{
                        this.urgent = false
                    }

                    let SheetId = this.production.ID,
                        SizeId = this.getIsDefault(this.production.Sizes),
                        PageId = this.getIsDefault(this.production.Pages),
                        QuantityId = this.getIsDefault(this.production.Quantities),
                        Attributes = '',
                        Crafts = '',
                        Count = 0,
                        Urgent = this.production.Urgent,
                        OrderType = this.printprice.OrderType,
                        FileName = '',
                        FilePath = '',
                        DocumentNum = '',
                        Thumb = '',
                        Selected = 1
                    this.production.Pages.forEach((item,index) => {
                        if(item['IsDefault']){
                            this.pages = item.Quantity
                        }
                    })
                    this.production.Sizes.forEach((item,index) => {
                        if(item['IsDefault']){
                            this.sizename = item.Name
                        }
                    })
                    this.production.Attributes.forEach((item,index) => {
                        let type;
                        item['Items'].forEach((tmp,i) => {
                            if(tmp['IsDefault']) {
                                Attributes += tmp.ID + ','
                                type = tmp['IsDefault']
                            }
                        })
                        if(!type) {
                            this.production.Attributes[index]['Items'][0]['IsDefault'] = true
                            Attributes += this.production.Attributes[index]['Items'][0].ID + ','
                        }
                    })
                    if(Attributes.lastIndexOf(',') == Attributes.length - 1) Attributes = Attributes.slice(0, -1)
                    resolve({SheetId, SizeId, PageId, QuantityId, Attributes, Crafts, Count, Urgent, OrderType, FileName, FilePath, DocumentNum,Selected,Thumb})
                })
            }).then(obj => {
                // console.log(obj)
                this.printprice = obj
                this.getPrice(this.printprice)
            })
        },
        getIsDefault(arr) {  // 获取默认参数id
            let id;
            if(arr.length == 0) id = ''
            for (var i = 0; i<arr.length; i++) {
                if (arr[i]['IsDefault']) id = arr[i].ID
                else {
                    arr[0]['IsDefault'] = true
                    id = arr[0].ID
                }
                if (arr[i]['Items']) {
                    arr[i]['Items'].forEach(item => {
                        if (item['IsDefault']) id = item.ID
                    })
                }
            }
            return id
        },
        setProduct(type, i, child, index) {  // 选择设置产品规格
            let arr = this.production[type], newIndex = i;
            if (child) {
                arr = arr[i][child]
                newIndex = index
            }
            this.setIsDefault(arr, newIndex, type)
        },
        setIsDefault(arr, index, type) {
            let Crafts = '', Attributes = '';
            for (var i = 0; i < arr.length; i++) {
                if (type != 'Crafts') {
                    arr[i]['IsDefault'] = false
                    if (i == index) {
                        arr[i]['IsDefault'] = true
                        switch (type) {
                            case 'Pages':
                                this.printprice.PageId = arr[i].ID
                                this.pages = arr[i].Quantity
                            break;
                            case 'Sizes':
                                this.printprice.SizeId = arr[i].ID
                                this.sizename = arr[i].Name
                            break;
                            case 'Quantities':
                                this.printprice.QuantityId = arr[i].ID
                            break;
                            case 'Urgent':
                            break
                        }
                    }
                } else {
                    if (i == index) 
                        arr[i]['IsDefault'] = arr[i]['IsDefault'] ? false : true
                }
            }
            this.production.Attributes.forEach(item => {
				item['Items'].forEach(temp => {
					if (temp['IsDefault']) {
						Attributes += temp.ID + ','
					}
				})
            })
            this.production.Crafts.forEach(item => {
                if(item['IsDefault']) 
                    Crafts += item.ID + ','
            })
            if (Attributes.lastIndexOf == Attributes.length - 1) Attributes = Attributes.slice(0, -1)
            if (Crafts.lastIndexOf == Crafts.length - 1) Crafts = Crafts.slice(0, -1)
            this.printprice.Attributes = Attributes
            this.printprice.Crafts = Crafts
            this.getPrice(this.printprice)
        },
        // 选择是否加急
        handleChooseUrgent() {
            this.urgent = !this.urgent
            this.printprice.Urgent = this.urgent
            this.getPrice(this.printprice)
        },
        // 选择文件
        handleClick(type) {
            if(type == 'have') {
                this.have = true
                this.no = false
                this.printprice.OrderType = 1
                this.getPrice(this.printprice)
            }else{
                if (!this.$store.state.login.isLogin) {
                    this.$store.commit('login/toggleShow', true)
                    return
                } else {
                    this.printprice.OrderType = 3
                    this.getPrice(this.printprice)
                    if(this.tempName == '') {
                        this.tempIndex = null
                    }
                    this.dialogVisible = true
                    this.getTemplate()
                    this.no = true
                    this.have = false
                }
            }
        },
        // 获取报价结果
        getPrice(obj) {
            // console.log(obj, '获取报价结果')
            let formData = new FormData()
            for (let item in obj) {
                formData.append(item, obj[item])
			}
            let config = {
                headers:{'Content-Type': 'multipart/form-data'}
            }
            this.$axios.post(this.$store.state.port.print.printprice, formData, config).then(res => {
                // console.log(res.data)
                this.totalPrice = res.data.TotalPrice || 0
                this.total = res.data.TotalPrice
                this.couponIndex = null
                if(this.currentDate < this.xiadanDate){
                    if(res.data.TotalProductionTime == 0){
                        this.time = '明天上午'
                    }else if(res.data.TotalProductionTime == 1){
                        this.time = '后天'
                    }else{
                        this.time = res.data.TotalProductionTime + '天后'
                    }
                }else{
                    if(res.data.TotalProductionTime == 0){
                        this.time = '后天'
                    }else{
                        this.time = (res.data.TotalProductionTime + 1) + '天后'
                    }
                }
            })
        },
        
        // 添加到购物车
        handleToCar(type) {
            if(!this.$store.state.login.isLogin) {
                this.$message({type: 'warning', message: '请先登录'})
                this.$store.commit('login/toggleShow', true)
                return 
            }
            if(type) {
                if(!this.tempNum && !this.printprice.FilePath) {
                    this.$confirm('您还没有选择任何文件,是否立即下单?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'success',
                        lockScroll: false
                    }).then(() => {
                        this.$store.commit('addShopingCar', this.printprice)
                        let cook = this.$myParseCookie(this.$store.state.productionObj)
                        this.$cookies.set('myCar', cook, {path: '/'}) 
                        this.$router.push({path: '/order/submitOrder', query: {t: 'order'}})
                    }).catch(() => {
                        this.$message.warning('已取消选择')
                    })

                }
                if(this.printprice.FilePath) {
                    this.$store.commit('addShopingCar', this.printprice)
                    let cook = this.$myParseCookie(this.$store.state.productionObj)
                    this.$cookies.set('myCar', cook, {path: '/'}) 
                    this.$router.push({path: '/order/submitOrder', query: {t: 'order'}})
                }
                if(this.tempNum) {
                    var formData = new FormData()
                    formData.append('documentnum', this.tempNum);
                    this.$axios.post('/ShopDocument', formData)
                    .then(({data}) => {
                        if(data.state == 'ok') {
                            this.printprice.DocumentNum = data.msg
                            this.$store.commit('addShopingCar', this.printprice)
                            let cook = this.$myParseCookie(this.$store.state.productionObj)
                            this.$cookies.set('myCar', cook, {path: '/'}) 
                            this.$router.push({path: '/order/submitOrder', query: {t: 'order'}})
                        }else{
                            this.$message.warning(data.msg)
                        }
                    }) 
                }
            }else{
                this.$store.commit('addShopingCar', this.printprice)
                let cook = this.$myParseCookie(this.$store.state.productionObj)
                this.$cookies.set('myCar', cook, {path: '/'}) 
                this.$confirm('加入购物车成功, 是否去提交订单?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'success',
                    lockScroll: false
                }).then(() => {
                    this.$router.push('/order/shoppingCart')
                }).catch(() => {
                    this.$message.warning('已取消选择')
                })
            }
        }
    },
    mounted() {
        this.getPrintSize()

        var date = new Date()
        var nowHours = date.getHours().toString();
        var nowMin = date.getMinutes().toString();
        var nowSeconds = date.getSeconds().toString()
        function p(str) {
            if(str.length<=1){
                str='0'+str;
            }
            return str
        }
        nowHours = p(nowHours)
        nowMin = p(nowMin)
        nowSeconds = p(nowSeconds)
        this.currentDate = date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate() + ' ' + nowHours + ':' + nowMin + ':' + nowSeconds
        this.xiadanDate = date.getFullYear() + '-' + (date.getMonth()+1) + '-' + date.getDate() + ' ' + '18:00:00'
        // console.log(this.currentDate, this.xiadanDate)
    },
    computed: {
        myHeader() {
            return {
                "token": this.$cookies.get('token')
            }
        }
    },
    components: {
        HomePagination
    }
    
}
</script>

<style lang="less" scoped>
.offer{
    width: 1136px;
    margin: 0 auto 95px;
    .offer-title{
        width: 667px;
        height: 120px;
        line-height: 100px;
        margin: 0 auto 39px;
        text-align: center;
        background-image: url(/img/themes/box.png);
        background-repeat: no-repeat;
        font-size:62px;
        font-family:SourceHanSansSC-Heavy;
        font-weight:800;
        color:rgba(255,255,255,1);
    }
    .offer-content{
        width: 1136px;
        // height: 476px;
        background:rgba(255,162,79,1);
        box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.33);
        border-radius: 15px;
        padding: 13px;
        .content{
            width: 1110px;
            // height: 450px;
            background:rgba(255,255,255,1);
            border-radius: 15px;
            padding: 38px;
            display: flex;
            justify-content: space-between;
            .content-left{
                width: 508px;
                .content-left-top{
                    border-bottom: 1px solid rgba(238,238,238,1);
                    p{
                        font-size:28px;
                        font-family:MicrosoftYaHei-Bold;
                        font-weight:bold;
                        color:rgba(51,51,51,1);
                        margin-bottom: 23px;
                    }
                    .service{
                        display: flex;
                        margin-bottom: 25px;
                        .promise {
                            display: inline-block;
                            //height: 24px;
                            line-height: 24px;
                            border: 1px solid transparent;
                            margin-right: 10px;
                            font-size: 13px;
                            border-radius: 3px;
                            padding-right: 5px;
                        }
                        & .promise:nth-child(1) {
                                border-color: #E81623;
                        }
                        & .promise:nth-child(2) {
                                border-color: #F3960A;
                        }
                        & .promise:nth-child(3) {
                                border-color: #54BE59;
                        }
                        & .promise:nth-child(4) {
                                border-color: #2292E9;
                        }
                        font {
                            display: inline-block;
                            width: 26px;
                            height: 24px;
                            line-height: 24px;
                            text-align: center;
                            color: #fff;
                        }
                    }
                }
                .content-left-bottom{
                    padding-top: 24px;
                    .list{
                        display: -webkit-box;
                        .title{ 
                            font-size:14px;
                            color:rgba(51,51,51,1);
                            margin-right: 15px;
                            line-height: 32px;
                        }
                        .coupon{
                            margin-left: -14px;
                        }
                        .file{
                            line-height: 43px;
                            margin-right: 15px;
                        }
                        .item{
                            display: flex;
                            align-items: center;
                            flex-wrap: wrap;
                            .choose-item{
                                display: inline-block;
                                border:1px solid rgba(191,191,191,1);
                                border-radius:3px;
                                text-align: center;
                                padding: 0 12px;
                                height: 32px;
                                line-height: 32px;
                                font-size: 14px;
                                color:rgba(102,102,102,1);
                                margin-right: 15px;
                                margin-bottom: 10px;
                                position: relative;
                                cursor: pointer;
                                &:hover{
                                    border: 1px solid @color;
                                }
                            }
                            .choose-img{
                                border: 1px solid rgba(255,255,255,1);
                                cursor: pointer;
                            }
                            .isUse{
                                color: rgba(153,153,153,1);
                                opacity: .5;
                            }
                            .active{
                                border: 1px solid @color;
                                &::before{
                                    content: '';
                                    background-image: url(/img/print/choose_blue.png);
                                    display: inline-block;
                                    position: absolute;
                                    bottom: 0;
                                    right: 0;
                                    width: 15px;
                                    height: 15px;
                                }
                            }
                        }
                        .way-btn{
                            display: flex;
                            align-items: center;
                            padding-left: 5px;
                            border:1px solid rgba(191,191,191,1);
                            border-radius:3px;
                            text-align: center;
                            width: 118px;
                            height: 43px;
                            line-height: 43px;
                            font-size: 14px;
                            color:rgba(102,102,102,1);
                            position: relative;
                            cursor: pointer;
                            margin-right: 15px;
                            img{
                                display: inline-block;
                                vertical-align: middle;
                                margin-right: 13px;
                            }
                        }
                        .have-file{
                            border: 1px solid rgba(254,108,35,1);
                            &::before{
                                content: '';
                                background-image: url(/img/print/choose_orange.png);
                                display: inline-block;
                                position: absolute;
                                bottom: 0;
                                right: 0;
                                width: 15px;
                                height: 15px;
                            }
                        }
                        .no-file{
                            border: 1px solid rgba(34,204,118,1);
                            &::before{
                                content: '';
                                background-image: url(/img/print/choose_green.png);
                                display: inline-block;
                                position: absolute;
                                bottom: 0;
                                right: 0;
                                width: 15px;
                                height: 15px;
                            }
                        }
                    }
                }
            }
            .content-right{
                padding-top: 50px;
                .choose-file{
                    width:432px;
                    height:116px;
                    background:rgba(241,241,242,1);
                    border-radius:5px;
                    padding-top: 25px;
                    padding-left: 66px;
                    position: relative;
                    .upload{
                        display: flex;
                        height: 42px;
                        line-height: 42px;
                        font-size:14px;
                        .success-file{
                            background: rgba(243,247,247,1);
                            color: @color;
                            border-radius: 5px;
                            //width: 97px;
                            .el-icon-close{
                                margin-left: 10px;
                            }
                        }
                    }
                    .choose-btn{
                        width: 128px;
                        border: 1px solid @color;
                        border-radius:5px;
                        color: @color;
                        margin-right: 20px;
                        img{
                            display: inline-block;
                            vertical-align: middle;
                            margin-right: 10px;
                        }
                    }
                    .el-upload__tip{
                        font-size:14px;
                        color:rgba(153,153,153,1);
                        margin-top: 15px;
                    }
                    .self-title{
                        display: flex;
                        img{
                            display: inline-block;
                            vertical-align: middle;
                        }
                        img:not(:nth-child(1)) {
                            cursor: pointer;
                        }
                        span{
                            margin-right: 51px;
                            margin-left: 8px;
                        }
                        img:last-child{
                            margin-left: 14px;
                        }
                    }
                }
                .self{
                    padding-left: 20px;
                }
                .price-wrap{
                    border-top: 1px solid rgba(238,238,238,1);
                    padding-top: 24px;
                    margin-top: 25px;
                    .amount{
                        font-size:14px;
                        font-family:MicrosoftYaHei;
                        font-weight:400;
                        color:rgba(51,51,51,1);
                        span{
                            font-size:27px;
                            font-weight:bold;
                            color:rgba(228,57,53,1);
                            margin-left: 14px;
                        }
                    }
                    .time{
                        font-size: 14px;
                        color:rgba(102,102,102,1);
                        display: flex;
                        align-items: center;
                        margin-top: 17px;
                        img{
                            display: inline-block;
                            width: 18px;
                            height: 18px;
                            vertical-align: middle;
                            margin-right: 7px;
                        }
                    }
                }
                .btn{
                    display: inline-block;
                    width: 167px;
                    height: 48px;
                    line-height: 48px;
                    text-align: center;
                    font-size: 18px;
                    color: rgba(254,254,254,1);
                    border-radius: 5px;
                    margin-top: 33px;
                    cursor: pointer;
                }
                .order{
                    background: rgba(255,87,87,1);
                    margin-right: 29px;
                }
                .add-cart{
                    background:rgba(243,152,0,1);
                }
            }
        }
    }
}

.choose-item-active {
	&::after {
		content: '';
		background-image: url(/img/print/choose_orange.png);
		background-size: 100%;
		background-repeat: no-repeat;
		display: inline-block;
		position: absolute;
		bottom: 0;
		right: -1px;
		width: 20px;
		height: 20px;
	}
}

.offer /deep/ .el-dialog{
    width:1134px;
    background:rgba(255,255,255,1);
    border-radius:10px;
    text-align: center;
    .el-dialog__header{
        padding: 20px 25px 0;
        line-height: 21px;
        font-size:23px;
        font-family:MicrosoftYaHei-Bold;
        font-weight:bold;
        color:rgba(51,51,51,1);
        position: relative;
        .el-dialog__headerbtn{
            position: absolute;
            top: 17px;
            right: -45px;
            .el-dialog__close{
                width: 24px;
                height: 24px;
                color: rgba(255,255,255,1);
            }
        }
    }
    .el-dialog__body{
        padding: 26px 30px 20px;
        .choose-title{
            text-align: left;
            font-size: 18px;
            color: rgba(51,51,51,1);
            padding-bottom: 15px;
        }
        .template-list{
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            .active{
                &::before{
                    content: '';
                    background-image: url(/img/print/choose_blue.png);
                    display: inline-block;
                    position: absolute;
                    bottom: 47px;
                    right: 0;
                    width: 15px;
                    height: 15px;
                }
            }
            .template-item{
                width: 198px;
                height: 180px;
                text-align: center;
                margin-bottom: 20px;
                cursor: pointer;
                position: relative;
                .template-block{
                    background:rgba(213,221,227,1);
                    border-radius:5px;
                    height: 135px;
                    padding: 22px;
                    .item-image{
                        display: inline-block;
                        width: 100%;
                        height: 100%;
                        background-size: contain;
                        background-position: 50%;
                        background-repeat: no-repeat;
                    }
                }
                .template-title{
                    padding: 15px 0 13px;
                }
            }
        }
    }
    .el-dialog__footer{
        text-align: center;
        .el-button{
            border-radius: 5px;
            width: 179px;
            line-height: 24px;
            font-size: 18px;
        }
        .sure-btn{
            background:rgba(243,152,0,1);
            border: none;
            margin-right: 140px;
        }
        .create-btn{
            background: @color;
            color: rgba(255,255,255,1);
        }
    }
}

#Loading{
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    z-index: 1000;
}
</style>
